<template>
	<view class="info ph-40 mt-20" v-if="!show">
		<u--form labelPosition="left" :model="model" ref="uForm" labelWidth="60" :labelStyle="{ fontSize: 32 }">
			<u-form-item label="头像" prop="name" borderBottom>
				<view class="f ai-c jc-s-b" @click="show=true">
					<view class="fs-26 text-color10">请上传清晰正面照，5M以内</view>
					<view class="f ai-c">
						<image :src="avatarUrl?avatarUrl:'../../static/logo.png'" class="w-80 h-80 b-80 mr-28"></image>
						<u-icon name="arrow-right" color="#CCCCCC" size="13"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="标签" prop="name" borderBottom>
				<view class="f jc-s-b" @click="show2=true">
					<view style="flex:1"><text v-for="(item,index) in tagListTo">{{item}}<text v-if="index<tagListTo.length-1">,</text></text></view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>

			<view class="list pb-40">
				<view class="mt-32 fs-32 text-color4 mb-24">资质上传</view>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1" width="79"
					height="79">
					<view class="w-158 h-158 f ai-c jc-c b-8 upload">
						<image src="@/static/add.png" class="w-66 h-66"></image>
					</view>
				</u-upload>
			</view>
			<view class="list pb-40 mb-40">
				<view class="mt-32 fs-32 text-color4 mb-24">擅长领域</view>
				<view class="w-f h-324 b-8 mt-24 remark ph-32 pv-28">
					<u--textarea v-model="model.skillingRemark" placeholder="请输入" border="none" count
						maxlength="200"></u--textarea>
				</view>
			</view>
			<view class="list pb-40">
				<view class="mt-32 fs-32 text-color4 mb-24">个人简介</view>
				<view class="w-f h-324 b-8 mt-24 remark ph-32 pv-28">
					<u--textarea v-model="model.introduction" border="none" count maxlength="200"></u--textarea>
				</view>
			</view>
		</u--form>
		<view style="height:160rpx"></view>
		<cover-view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f" style='z-index:999' v-if="!show2">
			<cover-view class="ph-40">

				<cover-view class="f ai-c h-88">
					<cover-image src="../../static/select-check.png" class="w-32 h-32" v-if="isAgree==true"
						@click="getAgree"></cover-image>
					<cover-image src="../../static/select.png" class="w-32 h-32" v-else @click="getAgree"></cover-image>
					<cover-view class="fs-22 text-color3 ml-12" style="display: flex;align-items: center">我已仔细阅读并同意<cover-view
							class="text-color" @click='toText(18)'>《宠医服务协议》</cover-view></cover-view>
				</cover-view>
				<cover-view class="f ai-c jc-s-b h-136">
					<cover-view class="w-327"><cover-view class="btn1" @click="toCancel">上一步</cover-view></cover-view>
					<cover-view class="w-327"><cover-view class="btn" @click="toConfirm">提交审核</cover-view></cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</view>

	<!-- 专业 -->
	<u-action-sheet :show="showSpeciality" :actions="specialityList" title="请选择专业" @close="showSpeciality = false"
		@select="sexSelect"> </u-action-sheet>
	<qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop" v-if="show"  @close="show=false"></qf-image-cropper>
	<u-popup :show="show2" @close="show2=false" round="8" closeable>
		<view class="popBox">
			<view :class="tagListTo.includes(item.value)?'itemAct':'item'" v-for="(item,index) in tagList"
				@click="toDoctor(item)">{{item.label}}</view>
		</view>
	</u-popup>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { getUploadUrl } from '@/utils/env';
	import { dictDataType } from '@/services/api/index'
	const model = ref({});
	const showTag = ref(false);
	const show = ref(false)
	const show2 = ref(false)
	const tagList = ref([]);
	const tagListTo = ref([])
	const showSpeciality = ref(false);
	const specialityList = ref([]);
	const fileList = ref<any[]>([]);
	const isAgree = ref(false);
	const avatarUrl = ref('');
	// 新增图片
	zidianList()

	async function zidianList() {
		console.log(1231413431)
		const res = await dictDataType({ type: 'doctor_title' })
		tagList.value = res.data
	}
	async function afterRead(event : any) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(
				fileListLen,
				1,
				Object.assign(item, {
					status: 'success',
					message: '',
					url: result,
				})
			);
			fileListLen++;
		}
	}
	function toDoctor(item) {
		if (tagListTo.value.includes(item.value)) {
			tagListTo.value.splice(tagListTo.value.findIndex(e => e == item.value), 1)
		} else {
			tagListTo.value.push(item.value)
		}
	}
	function handleCrop(e) {

		uploadFiles(e.tempFilePath);
	}
	function uploadFilePromise(url : string) {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: getUploadUrl(), // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data);

					}, 1000);
				},
			});
		});
	}
	function toText(type : number) {

		uni.navigateTo({
			url: '/pages_index/text?type=' + type,
		});
	}
	//上传
	function upload() {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res : any) {
				uploadFiles(res.tempFilePaths[0]);
			},
		});
	}
	function uploadFiles(url : string) {
		uni.uploadFile({
			url: getUploadUrl(),
			filePath: url,
			name: 'file',
			formData: {},
			success: (res : any) => {
				let data = JSON.parse(res.data);
				model.value.avatar = data.data;
				avatarUrl.value = data.data;
				show.value = false
			},
		});
	}

	function getAgree() {
		isAgree.value = !isAgree.value;

	}
	function toConfirm() {
		if (isAgree.value == false) {
			uni.showToast({
				title: '请输入阅读协议',
				icon: 'none',
			});
			return;
		}
		model.value.labelNames=tagListTo.value.toString()
		model.value.licenseUrl = fileList.value[0].url;
		model.value.avatar = avatarUrl.value;
		mtit('cf', 3, model.value)

	}
	function toCancel() {
		mtit('cf', 1, {})
	}
	const mtit = defineEmits<{
		// update:固定写法，后面的变量是父组件中v-model：后面的这个变量
		(event : 'cf', n : number, data : any) : void
	}>()
	//底部安全距离
	const systemInfo = uni.getSystemInfoSync();
	let safeArea = systemInfo.safeArea;
	let screenHeight = systemInfo.screenHeight;
	let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
	.popBox {
		padding-top: 70rpx;
		padding: 50rpx 30rpx;
		display: flex;
		flex-wrap: wrap;

		.itemAct {
			padding: 12rpx 20rpx;
			border: 1px solid #FABB3C;
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #FABB3C;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}

		.item {
			padding: 12rpx 20rpx;
			border: 1px solid #ccc;
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #ccc;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}
	}

	.btn1 {
		width: 100%;
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
	}

	.btn {
		width: 100%;
		height: 88rpx;
		background: #FABB3C;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.info {
		background: #fff;

		.remark {
			background: #f8f8f8;
		}

		.upload {
			border: 1rpx solid #dddddd;
		}

		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			border-top: 1px solid #f5f5f5;
		}

		.list {
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
</style>